<script setup>
import { ref } from 'vue'

const activeTab = ref(0);

const switchTab = (tabId) => {
  activeTab.value = tabId;
};

</script>
<template>
  <div class="container">
    <div class="page-title">账户管理</div>
    <div class="bs-panel">
      <el-row class="account-menu-list">
        <el-col :span="6">
          <div class="account-menu" @click="switchTab(0)">
            <img src="../../assets/images/file-icon.png" alt="">
            <span>个人资料</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="account-menu" @click="switchTab(1)">
            <img src="../../assets/images/safe-icon.png" alt="">
            <span>安全中心</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="account-menu" @click="switchTab(2)">
            <img src="../../assets/images/email-icon.png" alt="">
            <span>站内信</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="account-menu" @click="switchTab(3)">
            <img src="../../assets/images/set-icon.png" alt="">
            <span>通知设置</span>
          </div>
        </el-col>
      </el-row>
    </div>
    <File v-if="activeTab === 0" />
    <Safe v-if="activeTab === 1" />
    <Message v-if="activeTab === 2" />
    <Set v-if="activeTab === 3" />
  </div>
</template>
<style scoped lang='scss'>
.account-menu{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 85px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s;
}
.account-menu:hover{
  box-shadow: rgb(230, 143, 54) -1px 1px 10px;
  
}
.account-menu::before{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background-color: #d3d7dc;
}
.account-menu-list .el-col:last-child .account-menu::before{
  display: none;
}
.account-menu img{
  width: 42px;
  height: 42px;
  margin-right: 35px;
}



</style>